<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Meta, title, CSS, favicons, etc. -->
    {% include header.html %}
  </head>
  <body>
    <a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

    <!-- Docs master nav -->
    {% include nav.html %}

    <!-- Docs page layout -->
    <div class="bs-docs-header" id="content">
      <div class="container">
        <div class="row">
          <div class="col-md-8">
            <h1>{% t page.title %}</h1>
            <div>{% t page.lead %}</div>
          </div>
          <div class="col-md-4">
            {% include ads.html %}
          </div>
        </div>
      </div>
    </div>

    {% include social-buttons.html %}

    <hr>

    <div class="container bs-docs-container">

      <div class="row">
        <div class="col-md-{% if page.fullwidth == true %}12{% else %}9{% endif %}"
          role="main"
          {% if page.slug != "examples" %}data-toggle="sidenav"{% endif %}
          data-container="#sidenav"
          data-hs="h1,h2"
          data-smart-id="true"
          data-bottom=".bs-docs-footer">
          {{ content }}
        </div>
        {% unless page.fullwidth == true %}
        <div class="col-md-3">
          <div id="sidenav"></div>
        </div>
        {% endunless %}
      </div>
    </div>

    {% include footer.html %}
  </body>
</html>
